<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="流程名称：" prop="pageName">
            <el-input v-model="queryParams.pageName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编号：" prop="taskCode" label-width="60px">
            <el-input v-model="queryParams.taskCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属节点：" prop="articulatedNodes">
            <treeselect
              append-to-body
              v-model="queryParams.articulatedNodes"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="请选择所属节点"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/wf-business/done-list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
      class="table"
    >
      <template #link="{ row }">
        <div class="pointer" @click="handleDetails(row)">{{ row.code }}</div>
      </template>
    </table-panel>
    <el-dialog
      :visible.sync="detailsShow"
      title="页面预览"
      width="1200px"
      v-if="detailsShow"
    >
      <div class="preview-content">
        <template-window :form-data="formData" :template-type="templateType" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsShow = false" class="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { serachNodeList } from "@/api/nodeManage/node";
import { detailsData } from "@/api/pageManage/page.js";
import { detailsImg, preview } from "@/api/file/index";
import TemplateWindow from "@/views/components/template/index.vue";
import { Base64 } from "js-base64";
export default {
  name: "nodeIndex",
  components: {
    TablePanel,
    QueryPanel,
    Treeselect,
    TemplateWindow,
  },
  data() {
    return {
      queryParams: {
        pageName: "",
        taskCode: "",
        articulatedNodes: null,
      },
      operateArray: [
        {
          name: "审批意见",
        },
      ],
      columns: [
        {
          field: "code",
          label: "编码",
          slots: { default: "link" },
        },
        {
          field: "businessTypeName",
          label: "推介类型",
        },
        {
          field: "pageName",
          label: "页面名称",
        },
        {
          field: "nodeName",
          label: "所属节点",
        },
        {
          field: "createTime",
          label: "提交时间",
        },
        {
          label: "操作",
          width: "120px",
        },
      ],
      detailsShow: false,
      menuOptions: [],
      textTitle: {},
      formData: {
        templateId: "",
      },
      textContent: {},
      localImg: [],
      fileDataList: [],
      templateType: "",
    };
  },
  mounted() {
    serachNodeList().then((res) => {
      this.menuOptions = res.rows;
    });
  },
  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    onOperate(type, row) {
      this.$router.push({
        path: "/approvalManage/approvalOpinion",
        query: {
          data: JSON.stringify(row),
        },
      });
    },
    handleDetails(row) {
      this.templateType = row.businessTypeName;
      if (row.businessTypeName === "个人空间-营销方案-上架" || row.businessTypeName === "个人空间-营销方案-下架") {
        this.formData = row;
        this.detailsShow = true;
      } else if (row.businessTypeName === "产品货架-报价方案-上架" || row.businessTypeName === "产品货架-报价方案-下架") {
        this.formData = row;
        this.detailsShow = true;
      } else if (
        row.businessTypeName === "企业展示-资料管理-上架" ||
        row.businessTypeName === "产品货架-资料管理-上架" ||
        row.businessTypeName === "企业展示-资料管理-下架" ||
        row.businessTypeName === "产品货架-资料管理-下架"
      ) {
        this.handleDocumentManagement(row);
      } else {
        this.textTitle = {};
        this.formData = {
          templateId: "",
        };
        this.textContent = {};
        this.localImg = [];
        this.fileDataList = [];
        detailsData(row.pageId).then((res) => {
          const title = res.data.pagecontent1;
          const content = res.data.pagecontent2;
          const imgData = res.data.pagecontent3;
          this.formData.templateId = res.data.templateId;
          title.forEach((item, index) => {
            this.$set(
              this.textTitle,
              item.orderNum === 1 ? "title" : `title${item.orderNum - 1}`,
              item.titleContent
            );
          });
          content.forEach((item) => {
            this.$set(
              this.textContent,
              item.orderNum === 1 ? "content" : `content${item.orderNum - 1}`,
              item.textContent
            );
          });
          if (imgData.length === 0) {
            this.handleOpenDetails();
            return;
          }
          imgData.forEach((item, index) => {
            detailsImg({ fileId: item.fileId }).then((res) => {
              this.fileDataList.push({
                id: item.fileId,
                num: item.orderNum,
                url: res.data.url,
              });
              this.localImg = this.fileDataList.sort((a, b) => {
                return a.num - b.num;
              });
              this.handleOpenDetails();
            });
          });
        });
      }
    },
    // 打开详情的弹窗
    handleOpenDetails() {
      this.formData = {
        ...this.formData,
        ...this.textContent,
        ...this.textTitle,
        previewImg: this.localImg,
      };
      this.detailsShow = true;
    },
    // 处理文件管理详情
    handleDocumentManagement(row) {
      this.formData = row;
      if (row.documentFormat == 7) {
        this.detailsShow = true;
        this.templateType = "360视频";
      } else if (row.documentFormat == 6) {
        this.detailsShow = true;
        this.templateType = "360图片";
      } else if (row.documentFormat == 5) {
        this.detailsShow = true;
        this.templateType = "视频";
      } else if (row.documentFormat == 8) {
        this.$confirm(
          `
            建议配置：
            系统 win10 64位
            Cpu i7 7系列及以上
            内存 8G
            硬盘 SSD 500 G
            显卡 2060 6G显存及以上，提示
          `
        )
          .then(() => {
            window.location.href = row.documentLink;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消跳转VR",
            });
          });
      } else {
        let params = {
          fileId: row.fileId,
          fileName: row.pageName,
        };
        //   let windowPreview = window.open("", "_blank");
        this.getFileUrl(params).then((res) => {
          if (res.code !== 200) {
            window.close();
            alert(res.msg);
            return;
          }
          window.open(res.preview, "_blank");
          // windowPreview.location.href = res.preview;
        });
      }
    },
    // 查询预览url
    getFileUrl(file) {
      return new Promise((resolve) => {
        preview({ fileId: file.fileId }).then((res) => {
          if (res.code !== 200) {
            return resolve(res);
          }
          let storeId = res.data.storeId;
          let originUrl =
            storeId == null
              ? res.data.url
              : `${process.env.VUE_APP_API_HOST}${process.env.VUE_APP_BASE_API}/file/mongod-download/${storeId}`;
          originUrl += `?fullfilename=${file.fileName}`;
          let fininalUrl =
            process.env.VUE_APP_API_HOST +
            process.env.VUE_APP_BASE_API +
            "/kk-preview/onlinePreview?url=" +
            Base64.encode(originUrl);
          resolve({
            code: 200,
            downloadUrl: originUrl,
            preview: fininalUrl,
          });
        });
      }).catch((err) => {
        resolve({
          code: 500,
          msg: "服务器错误",
        });
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children === null) {
        delete node.children;
      }
      return {
        id: node.nodeId,
        label: node.nodeName,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-tooltip .ordinary-btn {
  width: 88px;
}
.pointer {
  font-size: 16px;
  color: #333333a6;
}
.app-container {
  ::v-deep .el-dialog__footer {
    text-align: center;
    button {
      width: 60px;
      height: 32px;
      padding: 0;
      text-align: center;
      line-height: 32px;
      border: none;
    }
    .determine {
      background: #971111;
      color: #ffff;
      &:hover {
        background: #971111;
        color: #ffff;
      }
    }
    .close {
      background: #e7e7e7;
      color: #000;
      &:hover {
        background: #e7e7e7;
        color: #000;
      }
    }
  }
}
.table {
  ::v-deep .el-button {
    border: none;
    width: 88px;
    height: 32px;
    background: #e7e7e7;
  }
}
.preview-content {
  width: 100%;
  height: 700px;
  overflow-y: auto;
}
</style>
